<template>
  <div>
    <el-button @click="drawer = true; ruleForm.name = ''; ruleForm.limmits = ''; ruleForm.pass = ''"
     type="primary" style="margin-bottom: 20px;">+添加管理员</el-button>
    <Table :tableData="tableData"  @del="del" @modifys="modifys"></Table>
    <el-drawer
  title="我是标题"
  :visible.sync="drawer"
  :with-header="false">
  <Form @cli="add" @modify="modify" :ruleForm="ruleForm" @changes="changes" ref="Form"></Form>
</el-drawer>
  </div>
</template>

<script>
import  Table  from '@/components/table.vue';
import  Form  from './form.vue';
import { getAccount, postAccount, postaddACC, postUpdata,  } from '@/api/account'
  export default {
    mounted(){
      this.list()
    },
    components:{
      Table,
      Form
    },
    data() {
      return {
        drawer: false,
        ruleForm: {
        name: '',
        pass: '',
        limmits: '',
        checkedKeys:[]
      },
        tableData: []
      }
    },
    methods: {
      async list() {
      let res = await getAccount()
      console.log(res);
      this.tableData = res.data
      this.total = res.data.length||0
    },
      async add(Forms) {
        console.log(1);
      let res = await postaddACC({
        adminname: Forms.name,
        password: Forms.pass,
        role: Forms.limmits,
        checkedKeys: this.ruleForm.checkedKeys
      })
      console.log(res);
      this.list()
    },
    del(adminid) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await postAccount({ adminid })
        this.list()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });


    },
    async modify(Forms){
     let res = await postUpdata(
      {
      adminname:Forms.name,
      password:Forms.pass,
      role:Forms.limmits,
      checkedKeys:[]
    })
      console.log(res,Forms);
      this.list()
      this.drawer=false
    },
    async modifys(row) {
      this.ruleForm.name = row.adminname
      this.ruleForm.pass = row.password
      this.ruleForm.limmits = row.role
      this.drawer = true

    },
    changes(){
      let fs = this.$refs.Form.$refs.tree
      this.ruleForm.checkedKeys=[...fs.getCheckedKeys(),...fs.getHalfCheckedKeys()]
      console.log(this.ruleForm.checkedKeys);
    }
    }
  }

</script>

<style lang="scss" scoped>

</style>